<template>
	<view class="container1">
		<!-- 搜索框 -->
		<view class="search-text">
				<uni-search-bar :focus="show" radius="18" :value="searchText" placeholder="请输入搜索内容" bgColor="white" @confirm="searchHandler" @input="inputHandler" />
		</view>
		<!-- 搜索历史 -->
		<view class="container-history" >
			<!-- 显示记录 -->
			<view class="show-history" v-if="searchMind.length <= 0 ">
						<view class="search-history">
							<view class="history">
								搜索历史
								<image @click="deleteHistory" src="../../static/delete.png" mode=""></image>
							</view>
						</view>
						<!-- 历史记录 -->
						<view class="historey-list">
							<button @click="searchHandler(item)" size="mini" style="margin-left: 20rpx;" v-for="(item,index) in historyList" :key="index">{{item}}</button>
						</view>
			</view>
			<!-- 显示联想搜索 -->
			<view class="search-history" style="padding: 0;" v-else>
				<view  class=" mind-search" @click="toSearchMind(item.goods_id)" v-for="(item,index) in searchMind" :key="item.goods_id">
					<view class="mind-text">
						{{item.goods_name}}
					</view>
					<image src="../../static/arrows.png" mode=""></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				searchText:'',
				searchMind:[],
				searchValue: ' ',
				historyList:[],
				timeId:null
				}
		},
		onLoad(){
			const value = uni.getStorageSync('search-history')
			console.log('value',value)
			this.historyList = value?value:[]
		},
		methods:{
			/**
			 * 将搜索记录持久化存储
			 */
			saveSearchHistory(){
				uni.setStorageSync('search-history',this.historyList)
			},
			/**
			 * 跳转联想产品详细信息
			 */
			toSearchMind(goodsId){
				uni.navigateTo({ url:'/subpkg/goods_detail/goods_detail?cId='+goodsId })
				this.setHistoryList(this.searchValue)
			},
			/**
			 * 有重复的值不添加将顺序调制前面， 反之添加在最前面 
			 * @param {Object} searchValue 添加的值
			 */
			setHistoryList(searchValue){
				const value = this.historyList.find(item=>item === searchValue)
				if(!value){
					this.historyList.unshift(this.searchValue)
				}else{
					const index = this.historyList.indexOf(value)
					this.historyList.splice(index , 1)
					this.historyList.unshift(value)
				}
				this.saveSearchHistory()
			},
			/**
			 * 删除历史记录
			 */
			deleteHistory(){
				this.historyList = []
				try {
					uni.removeStorageSync('search-history')
				} catch (e) {
					uni.$showMsg('删除历史记录失败')
				}
			},
			/**
			 * 提交搜索
			 */
			searchHandler(e){
				const value = e.value?e.value:e
				uni.navigateTo({ url:'/subpkg/goods_list/goods_list?query='+value })
				setTimeout(()=>{
					this.setHistoryList(value)
				},1000)
			},
			/**
			 * 选择搜索
			 * @param {Object} e
			 */
			inputHandler(e){
				//防抖处理
				clearTimeout(this.timeId)
					this.timeId = setTimeout(async()=>{
						this.searchValue = e
						if(this.searchValue !== ''){
							//联想搜索
							const { data:res } =await uni.$http.get('/api/public/v1/goods/qsearch',{ query:this.searchValue })
							if(res.meta.status !== 200) return uni.$showMsg()
							this.searchMind = res.message
							this.searchValue = e
						}else{
							this.searchMind=[]
						}
					},500)

			}
		}
	}
</script>

<style lang="scss">
	button::after{ border: none; }
	.search-text{
		.uni-searchbar{
			padding-bottom: 10rpx;
		}
		position: sticky;
		background-color: #C00000;
		//防止被后面的图片覆盖
		  z-index: 999;
			.search-list{
				width: 78%;
				height: 80rpx;
				background-color: pink;
			}
	}
	.container-history{
		background-color: #C00000;
		height: 30rpx;
		.mind-search{
			border-bottom: 1px solid #e9e9eb;
			height: 80rpx;
			text-align: left;
			line-height: 80rpx;
			margin:0 20rpx;
			font-size: 28rpx;
			.mind-text{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
				margin-right: 30rpx;
			}
			position: relative;
			image{
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.search-history{
		background-color: white;
		border-radius: 30rpx;
		padding: 20rpx 20rpx;
		.history{
			font-size: 28rpx;
			width: 100%;
			height: 60rpx;
			border-bottom: 1px solid #e9e9eb;
			position: relative;
			image{
				right: 0;
				top: 0;
				position: absolute;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

</style>
